<template>
  <div id="cropper-image-view" style="text-align: right">
    <img id="op-image" :src="imageUrl" alt="">
    <a-button @click="handleCrop" type="primary" style="margin-top: 10px">OK</a-button>
  </div>
</template>

<script setup lang="ts">
import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';
import { onMounted } from 'vue';

const props = defineProps({
  imageUrl: {
    type: String
  }
});

let cropper = null;

onMounted(() => {
  const image = document.getElementById('op-image');
  cropper = new Cropper(image, {
        aspectRatio: 1,
        viewMode: 1,
  });
});

const emit = defineEmits(['image-cropped'])

const handleCrop = () => {
  if (!cropper) return;
  const canvas = cropper.getCroppedCanvas();
  emit('image-cropped', canvas);
}
</script>

<style scoped>

#cropper-image-view {
  max-width: 100%;
  max-height: 100%;
}

#op-image {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 90%;
}
        
</style>

<style>
.cropper-view-box, .cropper-face {
    border-radius: 50%;
}
</style>